<template>
	<view class="content">
		<view class="box">
			<!-- <view class="title">默认效果</view> -->
		</view>
		<t-table class="tbtitle" border="0">
			<t-tr v-if="RecordDetail.Theme ">
				<t-td class="tr">主题:</t-td>
				<t-td class="tl">{{ RecordDetail.Theme }}</t-td>
			</t-tr>
			<t-tr v-if="RecordDetail.Category ">
				<t-td class="tr">类型:</t-td>
				<t-td class="tl">{{ RecordDetail.Category }}</t-td>
			</t-tr>
			<t-tr v-if="RecordDetail.StartTime ">
				<t-td class="tr">开始时间:</t-td>
				<t-td class="tl">{{ RecordDetail.StartTime }}</t-td>
			</t-tr>
			<t-tr v-if="RecordDetail.Duration">
				<t-td class="tr">活动时长:</t-td>
				<t-td class="tl">{{ RecordDetail.Duration }}分钟</t-td>
			</t-tr>
			<t-tr v-if="RecordDetail.Place">
				<t-td class="tr">活动地址:</t-td>
				<t-td class="tl">{{ RecordDetail.Place }}</t-td>
			</t-tr>
			<t-tr v-if="RecordDetail.branchMemberInfos.length>0">
				<t-td>参与人员</t-td>
			</t-tr>
			<t-tr>
				<t-td>
					<view v-for="(MemberInfo, i) in RecordDetail.branchMemberInfos" :key="i">
						{{ MemberInfo.BranchName }}:
						<text v-for="(p,k) in MemberInfo.inMemberNames" :key="k">{{ p }},</text>
					</view>
				</t-td>
			</t-tr>
			<!-- <t-tr><t-td>图片集</t-td></t-tr> -->
			<t-tr v-if="swiperList.length>0">
				<bw-swiper :swiperList="swiperList" style="width:100%"></bw-swiper>
			</t-tr>

			<!-- <t-tr><t-td>内容</t-td></t-tr> -->
			<t-tr>
				<t-td>
					<!-- <text v-html="RecordDetail.Content" user-select ></text> -->

					<!-- #ifdef MP-WEIXIN -->
					<view v-html="RecordDetail.Content" user-select style="text-align: left;">

					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<text v-html="RecordDetail.Content" user-select></text>
					<!-- #endif -->

				</t-td>
			</t-tr>
		</t-table>
		<!-- <view class="Category">{{ RecordDetail.Category }}</view> -->
	</view>
</template>

<script>
	import bwSwiper from '@/wxcomponents/bw-swiper/bw-swiper.vue';
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				RecordDetail: {},
				swiperList: []
			};
		},
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			bwSwiper
		},
		computed: {
			...mapState(['token', 'userCode'])
		},
		methods: {
			...mapActions(['reLogin', 'getToken', 'hasLogin']),
			getRecordDetail(options) {
				if (!options.id) {
					uni.navigateTo({
						url: '../public/404'
					});
				}
				let url = {
					url: '/api/GetRecordDetail/' + options.id
				}
				let param = {
					userCode: this.userCode,
					token: this.token
				}
				this.$request.httpRequest(url, param).then(e => {
					if (!e.data.Success) {
						this.reLogin();
					}
					this.RecordDetail = e.data;
					uni.setNavigationBarTitle({
						title: this.RecordDetail.Theme
					});
					this.RecordDetail.imageUrls.forEach(e => {
						this.swiperList.push({
							img: e
						});
					});
					// console.log(this.RecordDetail);
				})
			}
		},
		onLoad(options) {
			this.hasLogin();
			this.getRecordDetail(options);
		}
	};
</script>

<style lang="scss">
	.tr {
		// text-align: right;
		justify-content: flex-end !important;
		// width: 30%;
		flex: 0.4;
	}

	.tl {
		text-align: left !important;
		justify-content: flex-start !important;
	}

	.t-tr {
		// background-color: #00BFFF;

	}

	/* .content{
		height: 80vh;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40upx;
	} */
</style>
